<template>
    <div :class="ggclass" class="row-box" ref="row" :style="{ 'grid-template-columns': repeat, 'grid-gap': gridGap }">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "c-row",
    props: {
        ggclass: {
            type: String,
            default: "",
        },
        gridGap: {
            type: String,
            default: "20rpx",
        },
        number: {
            type: Number,
            default: 2,
        },
    },
	computed:{
		repeat(){
			return `repeat(${this.number},1fr)`
		},
	},
};
</script>

<style lang="scss" scoped>
.row-box {
    display: grid;
    width: 100%;
}
</style>
